@charset "utf-8";

@import "./reset.scss";

@function getvw($w){
    @return ($w / 750) * 100 + vw
}

.header{
    width: getvw(750);
    ul{
        display: flex;
        margin: getvw(48) getvw(23);
        justify-content: space-between;
        align-items: center;
        li {
            font-size: getvw(25);
            img{
                width: getvw(52);
                height: getvw(50);
            }
        }
        li:first-child{
            width: getvw(123);
            height: getvw(57);
            border-radius: getvw(20);
            border: 1px solid orange;
            text-align: center;
            line-height: getvw(57);
            font-size: getvw(21);
            a{
                color: black;
                text-decoration: none;
            }
        }
    }
}
.main{
    width: getvw(705);
    margin: 0px auto;
    .picture{
        margin-bottom: getvw(36);
        img{
            width: getvw(705);
            height: getvw(260);
        }
    }
    .price{
        width: getvw(666);
        margin: 0px auto;
        margin-bottom: getvw(51);
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            color: orange;
            font-size: getvw(57);
        }
        .buy{
            width: getvw(111);
            height: getvw(59);
            background-color: orange;
            text-align: center;
            line-height: getvw(59);
            color: white;
            font-size: getvw(30);
            border-radius: getvw(20);
        }
    }
    .good{
        width: getvw(666);
        margin: 0px auto;
        margin-bottom: getvw(36);
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            li:first-child{
                img{
                    width: getvw(38);
                    height: getvw(36);
                }
            }
            li:nth-child(2){
                width: getvw(420);
                align-content: left;
                font-size: getvw(30);
                p{
                    display: inline-block;
                }
                span{
                    color: orange;
                }
            }
            li:last-child{
                font-size: getvw(26);
                color: gray;
            }
        }
    }
    .suit{
        width: getvw(664);
        height: getvw(67);
        margin: 0px auto;
        margin-bottom: getvw(10);
        // padding: 0px getvw(22);
        background-color: orange;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: white;
        font-size: getvw(31);
        p:first-child{
            transform: translateX(getvw(11));
        }
        p:nth-child(2){
            font-size: getvw(25);
            transform: translateX(getvw(-9));
        }
    }
    .shop{
        width: getvw(664);
        margin: 0px auto;
        margin-bottom: getvw(10);
        position: relative;
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            li:first-child{
                img{
                    width: getvw(177);
                    height: getvw(176);
                }
            }
            li:nth-child(2){
                width: getvw(350);
                height: getvw(176);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .icon{
                    .star{
                        color: orange;
                        font-size: getvw(34);
                    }
                    span{
                        color: gray;
                        font-size: getvw(26);
                    }
                }
                p:first-child{
                    font-size: getvw(31);
                }
                p:nth-child(3){
                    font-size: getvw(24);
                    color: gray;
                }
                p:nth-child(4){
                    font-size: getvw(20);
                    color: orange;
                }
            }
            li:last-child{
                width: getvw(111);
                height: getvw(59);
                text-align: center;
                line-height: getvw(59);
                background-color: orange;
                color: white;
                font-size: getvw(29);
                border-radius: getvw(35);
            }
        }
        .text{
            width: getvw(177);
            height: getvw(39);
            background-color: #f3ece7;
            position: absolute;
            top: getvw(91);
            text-align: center;
            line-height: getvw(39);
            opacity: 0.7;
            font-size: getvw(24);
        }
    }
    .bottomShop{
        width: getvw(664);
        margin: 0px auto;
        margin-bottom: getvw(140);
        position: relative;
        ul{
            display: flex;
            justify-content: space-between;
            align-items: center;
            li:first-child{
                img{
                    width: getvw(177);
                    height: getvw(176);
                }
            }
            li:nth-child(2){
                width: getvw(350);
                height: getvw(176);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .icon{
                    .star{
                        color: orange;
                        font-size: getvw(34);
                    }
                    span{
                        color: gray;
                        font-size: getvw(26);
                    }
                }
                p:first-child{
                    font-size: getvw(31);
                }
                p:nth-child(3){
                    font-size: getvw(24);
                    color: gray;
                }
                p:nth-child(4){
                    font-size: getvw(20);
                    color: orange;
                }
            }
            li:last-child{
                width: getvw(111);
                height: getvw(59);
                text-align: center;
                line-height: getvw(59);
                background-color: orange;
                color: white;
                font-size: getvw(29);
                border-radius: getvw(35);
            }
        }
        .text{
            width: getvw(177);
            height: getvw(39);
            background-color: #f3ece7;
            position: absolute;
            top: getvw(91);
            text-align: center;
            line-height: getvw(39);
            opacity: 0.7;
            font-size: getvw(24);
        }
    }
}

.bottom{
    width: getvw(750);
    position: fixed;
    bottom: 0px;
    background-color: white;
    ul{
        display: flex;
        justify-content: space-around;
        li{
            text-align: center;
            a{
                color: black;
                text-decoration: none;
            }
            i{
                font-size: getvw(73);
                color: orange;
            }
            p{
                font-size: getvw(26);
            }
        }
    }
}